import React, { Dispatch, useState } from "react";
import { Tooltip } from "@rneui/base";
import { Pressable, Vibration, View } from "react-native";
import Menu from "./Menu";
import styles from "./index.style";


interface MenuTriggerProps {
  children: React.ReactNode;
  show: boolean;
  setShow: Dispatch<React.SetStateAction<boolean>>;
  menus: string[];
  onMenuItemPress?: (item: string) => void;
  longPressDelay?: number;
  disableVibration?: boolean;
}

/**
 * MenuTrigger 组件 - 长按触发菜单
 * @author FlanChan
 * @param children 子元素
 * @param show 是否显示菜单
 * @param setShow 设置是否显示菜单
 * @param menus 菜单项列表
 * @param onMenuItemPress 菜单项点击回调
 * @param longPressDelay 长按延迟，默认500ms
 * @param disableVibration 禁用震动，默认false
 * @constructor
 */
export default function MenuTrigger({
  children,
  show,
  setShow,
  menus,
  onMenuItemPress,
  longPressDelay = 500,
  disableVibration = false,
}: MenuTriggerProps) {
  const [isPressed, setIsPressed] = useState(false);

  const handleLongPress = () => {
    if (!disableVibration) {
      Vibration.vibrate(10); // 提供触感反馈
    }
    setShow(true);
  };

  return (
    <View style={styles.container}>
      <Tooltip
        popover={
          <Menu
            menus={menus}
            setShow={setShow}
            onMenuItemPress={onMenuItemPress}
          />
        }
        onClose={() => setShow(false)}
        visible={show}
        skipAndroidStatusBar={false}
        width={250}
        height={60}
        withOverlay={false}
        backgroundColor="transparent"
        overlayColor="rgba(0,0,0,0.1)"
        pointerColor="transparent"
        toggleOnPress={false}
      >
        <Pressable
          onLongPress={handleLongPress}
          delayLongPress={longPressDelay}
          onPressIn={() => setIsPressed(true)}
          onPressOut={() => setIsPressed(false)}
          style={[styles.pressableContainer, isPressed && styles.pressedState]}
        >
          {children}
        </Pressable>
      </Tooltip>
    </View>
  );
}
